<template>
	<div class="self-appoint">
		<el-timeline>
			<el-timeline-item
				v-for="(activity, index) in allParticipants"
				:key="index"
				:timestamp="activity.nodeName + ' · ' + activity.nodeDesc + (activity.approveType ? ' · ' + activity.approveType : '')"
				placement="top"
			>
				<el-card v-if="!['发起人自己'].includes(activity.nodeDesc)" shadow="never">
					<v-user :message="activity.user"></v-user>
					<template v-if="activity.users">
						<v-user :message="item" v-for="item in activity.users" :key="item.id"></v-user>
					</template>
					<template v-if="activity.userGroup">
						<template v-for="item in activity.userGroup">
							<v-user v-for="(items, indexs) in item" :key="indexs" :message="items"></v-user>
						</template>
					</template>
					<v-auditer
						v-if="(activity.approveAppointVar || activity.nodeTypeName === 'CS') && !readonly"
						v-model="formData[activity.approveAppointVar || activity.nodeId]"
						disDept
						:multiple="activity.nodeUserType === '01'"
						authFlag="00"
						:disabled="
							activity.nodeTypeName === 'CS'
								? [activity.user ? activity.user.id : '', ...(activity.users ? activity.users.map(item => item.id) : [])]
								: false
						"
					>
						<template #default="{ names, list, open }">
							<div v-if="activity.nodeUserType === '01'">
								<div class="items" v-for="(item, index) in list" :key="index">
									{{ item.name }}
								</div>
							</div>
							<div v-else class="items">
								{{ names }}
							</div>
							<div class="s-auditer" @click="open"></div>
						</template>
					</v-auditer>
				</el-card>
			</el-timeline-item>
		</el-timeline>
	</div>
</template>

<script>
import request from "@/common/request"
import VUser from "./user.vue"

/**
 * nodeUserType 01 多人 00 单人
 */

const baseUrl = process.env.VUE_APP_ROOT_URL_ENV
export default {
	name: "self-appoint",
	model: {
		prop: "inputValue",
		event: "update:value",
	},
	props: {
		inputValue: {},
		actKey: {
			default: "",
		},
		fid: {
			default: "",
		},
		engineVersion: {
			default: "",
		},
		pid: {
			default: "",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		request: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			allParticipants: [],
			value: {},
			formData: {},
		}
	},
	computed: {},
	mounted() {
		if (this.fid || this.actKey) {
			this.getData()
		}
	},
	methods: {
		getData() {
			if (this.request) {
				const data = {}
				data.pid = this.pid
				if (this.actKey) {
					data.actKey = this.actKey
				}
				if (this.fid) {
					data.fid = this.fid
				}
				if (this.engineVersion) {
					data.engineVersion = this.engineVersion
				}
				request("get", "/flowable/approves/allParticipants", data).then(res => {
					if (res.code != 0) {
						return
					}
					this.setData(res.data)
				})
			} else {
				let authorization = "Bearer " + localStorage.getItem("token") || ""
				this.$axios({
					method: "get",
					url: `${baseUrl}flowable/approves/allParticipants?fid=${this.fid}`,
					headers: {
						Authorization: authorization,
					},
				}).then(res => {
					if (res.data.code != 0) {
						return
					}
					this.setData(res.data.data)
				})
			}
		},
		setData(data) {
			this.allParticipants = [].concat(data)
			data.forEach(item => {
				if (item.approveAppointVar) {
					const user = []
					if (item.user) {
						if (item.user.id > 0) {
							user.push(item.user.id)
						}
					} else if (item.users) {
						item.users.forEach(item => {
							if (item.id > 0) {
								user.push(item.id)
							}
						})
					}
					this.$set(this.formData, item.approveAppointVar, {
						dept: [],
						user,
					})
				}
			})
		},

		username(name) {
			return name.slice(0, 2)
		},
	},
	watch: {
		formData: {
			handler(value) {
				const formData = {}
				Object.keys(value).map(key => {
					let data = value[key].user
						.map(item => {
							if (typeof item === "string") {
								return item
							}
							return item.id
						})
						.join()
					const { nodeUserType } = this.allParticipants.find(item => item.approveAppointVar === key || item.nodeId === key)
					if (nodeUserType === "01") {
						if (value[key].user.length === 1) {
							data = data + ","
						}
					}
					formData[key] = data
				})
				this.$emit("update:value", formData)
			},
			deep: true,
		},
		inputValue: {
			handler(value) {
				Object.keys(value).forEach(key => {
					if (this.formData[key]) {
						if (value[key] === this.formData[key].user.join() || value[key] === this.formData[key].user.join() + ",") {
							return
						}
					}
					this.formData[key] = {
						dept: [],
						user: value[key].split(",").filter(item => item),
					}
				})
			},
			deep: true,
		},
	},
	components: {
		VUser,
	},
}
</script>

<style lang="scss" scoped>
.self-appoint {
	.list {
		margin-bottom: 10px;
		.title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: 700;
		}
		.avatar {
			width: 30px;
			height: 30px;
			overflow: hidden;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			color: #fff;
			background: #0cafcc;
			font-size: 12px;
			margin-right: 10px;
		}
		.tip {
			color: #666;
			font-weight: 500;
			font-size: 12px;
			letter-spacing: 1px;
			margin-left: auto;
			&.success {
				color: #67c23a;
			}
			&.error {
				color: #f56c6c;
			}
		}
		.remark {
			color: #999;
			font-size: 12px;
			margin-top: 5px;
			padding: 5px 7px;
			border-radius: 3px;
			background: #f5f5f5;
		}
	}
	.s-auditer {
		width: 60px;
		height: 60px;
		border-radius: 10px;
		background: #f5f5f5;
		color: #666;
		position: relative;
		cursor: pointer;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
			background: currentColor;
		}
		&::before {
			height: 50%;
			width: 3px;
		}
		&::after {
			width: 50%;
			height: 3px;
		}
	}
	.items {
		font-size: 14px;
		font-weight: 700;
		padding: 0 10px 10px;
	}
}
</style>
